<template>
	<view class="page">
		<view id="default-header" class="wos-flex wos-flex-row wos-flex-between">
			<view>
				<text class="wos-font-bold">Redis for uniCloud</text>
				<text class="wos-color-grey wos-text-sm">v1.0.0 in WOS</text>
			</view>
			<view>
				<text class="wos-text-sm">注销</text>
			</view>
		</view>
		<view id="default-main" class="wos-flex wos-flex-row wos-flex-between">
			<view id="main-nav">
				<view id="default-main-title" class="item wos-hand" :class="tabType === 'online' ? 'active' : ''" @tap="go('online')">
					<text>在线数据</text>
				</view>
				<view id="default-main-title" class="item wos-hand" :class="tabType === 'help' ? 'active' : ''" @tap="go('help')">
					<text>API Help</text>
				</view>
			</view>
			<view id="main" class="wos-flex-auto">
				<view v-if="tabType === 'help'">
					<mavon-editor :navigation="true" id="mavonEditor" defaultOpen="preview" :shortCut="false" :subfield="false" :boxShadow="false" :toolbarsFlag="false" previewBackground="#FFFFFF" :editable="false" v-model="markdownData"/>
				</view>
				<view v-else>
					<iframe style="width: 100%;height:100vh;" src="/#/pages/server/server" frameborder="0"></iframe>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import mdGet from '@'
	export default {
		data() {
			return {
				tabType:'online',
				markdownData:"# 1"
			}
		},
		onLoad() {
			uni.request({
			    url: '/static/markdown/index.md', //仅为示例，并非真实接口地址。
			    success: (res) => {
			        this.markdownData = res.data;
			    }
			});
		},
		methods: {
			go(tab, url){
				this.tabType = tab
				
			}
		}
	}
</script>

<style lang="scss">
	.color-green{
		color: $wos-font-green;
	}
	.page{
		width: 100vw;
	}
	#default-header{
		background-color: $wos-bg-grey;
		padding: 30rpx;
		border-bottom: 1rpx solid #DDDDDD;
	}
	#default-main{
		#main-nav{
			min-width: 15vw;
			min-height: 100vh;
			padding: 30rpx 0;
			border-right: 1rpx solid #DDDDDD;
			#default-main-title{
				// background-color: ;
			}
			.item{
				padding: 10rpx 30rpx; 
				border-left: 10rpx solid #FFFFFF;
				margin-bottom: 20rpx;
			}
			.active{
				border-left: 10rpx solid $wos-font-green;
				color:$wos-font-green
			}
		}
	}
	#main{
		
	}
	#mavonEditor {
	  width: 100%;
	  height: 100%;
	  border: 0;
	}
</style>
